<template>
  <div class="blog-toc-container">
    <h2>目录</h2>
    <SideList :list="toc" @select="handleSelect"></SideList>
  </div>
</template>

<script>
import SideList from './SideList.vue';
export default {
  components: {
    SideList
  },
  props: {
    toc: {
      type: Array,
    },
  },
  methods: {
    handleSelect(item) {
      console.log(item)
      location.hash = item.anchor
    }
  },
};
</script>

<style scoped lang="less">
.blog-toc-container {
  width: 100%;
  height: 100%;
  padding-left: 100px;
  h2 {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1em;
    margin: 0;
  }
}
</style>
